<template>
  <div class="app-container">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 100%; background: black; height:300px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { echarts, Treeselect },
  props: ["message"], // 声明一个自定义的属性
  data() {
    return {
      echartData: []
    };
  },
  watch: {
    message: {
      immediate: true,
      handler(val) {
        //  console.log(val,'差点撒旦阿萨=============');
        this.echartData = val;
        //  val.forEach((item) => {
        //   this.getDataNum.push(Number(item.ytdUvNew))
        //   this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
        // })
        this.$nextTick(() => {
          //这里需要重新加载渲染
          this.drawLine();
        });
      }
    }
  },

  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      var scale = 1;
      function _pie2() {
        let dataArr = [];
        for (var i = 0; i < 4; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 25,
              itemStyle: {
                normal: {
                  // color: 'rgba(88,142,197,0.5)',
                }
              }
            });
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 20,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0,0)"
                }
              }
            });
          }
        }
        return dataArr;
      }

      var echartData = this.echartData;

      var total_datas = 0;
      for (var i = 0; i < echartData.length; i++) {
        total_datas += echartData[i].value;
        console.log(total_datas);
      }

      var rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 12 * scale,
          // padding: [21, 0],
          align: "center"
        },
        total: {
          color: "#ffc72b",
          fontSize: 40 * scale,
          align: "center"
        },

        blue: {
          color: "#49dff0",
          fontSize: 12 * scale,
          align: "center"
        },
        hr: {
          borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0
        }
      };
      var option = {
        backgroundColor: "#050616",
        title: {
          text: "总数",
          subtext: total_datas,
          textStyle: {
            color: "#f2f2f2",
            fontSize: 20,
            align: "center"
          },
          subtextStyle: {
            fontSize: 20,
            color: ["#ff9d19"]
          },
          x: "center",
          y: "center"
        },
        // legend: {
        //   // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
        //   orient: "vertical",
        //   // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
        //   x: "left",
        //   // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
        //   y: "center",
        //   itemWidth: 24, // 设置图例图形的宽
        //   itemHeight: 18, // 设置图例图形的高
        //   textStyle: {
        //     color: "#666" // 图例文字颜色
        //   },
        //   // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
        //   itemGap: 30,
        //   data: [
        //     "曲阜师范大学",
        //     "潍坊学院",
        //     "青岛职业技术学院",
        //     "淄博师范高等专科",
        //     "鲁东大学",
        //     "山东师范大学"
        //   ]
        // },

        series: [
          {
            name: "总考生数量",
            type: "pie",
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: "#030d22"
              }
            },
            radius: ["38%", "50%"],
            hoverAnimation: false,
            color: [
              "#c487ee",
              "#deb140",
              "#49dff0",
              "#034079",
              "#6f81da",
              "#00ffb4"
            ],
            label: {
              normal: {
                formatter: function(params, ticket, callback) {
                  var total = 0; //总数量
                  var name = 0; //名字
                  // var percent = 0;
                  echartData.forEach(function(value, index, array) {
                    total += value.value;
                  });
                  echartData.forEach(function(value, index, array) {
                    name += value.value;
                  });
                  // percent = ((params.value / total) * 100).toFixed(1);
                  return (
                    "{yellow|" + params.value + "}\n{blue|" + params.name + "}"
                  );
                },
                rich: rich
              }
            },
            // labelLine: {
            //     normal: {
            //         length: 55 * scale,
            //         length2: 10,
            //         lineStyle: {
            //             color: '#0b5263'
            //         }
            //     }
            // },
            data: echartData
          },
          {
            type: "pie",
            zlevel: 2,
            silent: true,
            center: ["50%", "50%"],
            radius: ["58%", "55%"],
            startAngle: 50,
            hoverAnimation: false,
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(234, 40, 125, 1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(234, 40, 125, 0.01)"
                  }
                ],
                global: false
              }
            ],
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: _pie2()
          },
          {
            type: "pie",
            radius: ["35%", "36%"],
            data: [100],
            label: {
              show: false
            },
            color: "#121F22"
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px !important;
  min-height: calc(0vh - 0px) !important;
  margin: 0px 35px;
}
</style>
